/**
 * 泛娱区块链 - Mine
 * creteed by zaric
 * 新闻快讯
 */


'use strict';

import React, { Component } from 'react'
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'
import NavigationBar from '../../component/navigation/NavigationBar'
import ListView from '../../component/list/ListView';
import ServicesApi from '../../config/ServicesApi';
import FlashItem from './FlashItem';
import SpinnerLoading from "../../component/common/SpinnerLoading";

export default class NewsFlash extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            ready: false,
        };
        this.page = 1
    }

    componentDidMount() {
        this.requestDataSources();
    }

    componentWillMount() {
    }

    requestDataSources = async () => {
        const limit = 10;
        let url = ServicesApi.FLASH_QUERY;
        let data = {
            limit,
            page: this.page,
        };
        const result = await Services.post(url, data);
        if (result.code === 0) {
            if (this.page === 1) {
                this.setState({ dataSource: result.data })
            } else if (this.page > 1 && result.data.length !== 0) {
                let oldData = this.state.dataSource.slice();
                oldData = oldData.concat(result.data);
                this.setState({ dataSource: oldData })
            }
        }
        this.setState({ready: true});
        this._listViewRef && this._listViewRef.stopRefresh();
        this._listViewRef && this._listViewRef.stopEndReached({ allLoad: result.data.length < limit })

    };

    _onPressItem = (item, index) => {

    };

    _onRefresh = (stopRefresh) => {
        this.page = 1
        this.requestDataSources()
    };

    _onEndReached = (stopEndReached) => {
        this.page++
        this.requestDataSources()
    };

    renderSep = () => {
        return (
            <View style={styles.sep} />
        )
    }

    _renderItem = ({ item, index }) => {
        return (
            <FlashItem
                item={item}
            />
        )
    };

    _keyExtractor = (item, index) => {
        return `item${index}`
    };

    _captureRef = (v) => {
        this._listViewRef = v
    };


    render() {
        const { dataSource, ready } = this.state
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'快讯'}
                    renderLeftAction={null}
                    style={[Theme.transparentNavBar, { borderBottomWidth: Theme.minPixel * 2 }]}
                />
                {ready ?
                    <ListView
                        ref={this._captureRef}
                        initialRefresh={false}
                        enableLoadMore={true}
                        enableRefresh={true}
                        data={dataSource}
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderItem}
                        ItemSeparatorComponent={this.renderSep}
                        onRefresh={this._onRefresh}
                        onEndReached={this._onEndReached}
                        ListHeaderComponent={null}
                        style={styles.listView}
                    />
                    : <SpinnerLoading/>
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headerLine: {
        width: Theme.screenWidth,
        height: Theme.minPixel,
        backgroundColor: '#979797',
    },
    listView: {
        flex: 1,
    },
    sep: {
        height: 0
    }
});